<template>
<div class="bg">
<div class="container">
    <div class="main">
     <div class="nice-card">

    <div class="nice-card-bodyer">
      <div class="userinfo con">
        <div class="avatar">
          <img src="https://cdn.jsdelivr.net/gh/Rimuru1314/cdn/img/custom/rimuru.jpg" alt="">
        </div>
        <p class="nickname">{{name}}</p>
        <p class="description">世界并不完美,却因此而美丽</p>
        <ul class="contact">
          <li>
            <el-tooltip class="item" effect="dark" content="2225602504@qq.com" placement="top">
              <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=2225602504@qq.com" target="_blank">
                <img src="../../assets/images/contact/mail.png">
              </a>
            </el-tooltip>
          </li>
          <li>
            <el-tooltip class="item" effect="dark" content="2225602504" placement="top">
              <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2225602504&amp;site=qq&amp;menu=yes" target="_blank">
                <img src="../../assets/images/contact/qq.png">
              </a>
            </el-tooltip>
          </li>
          <li>
            <el-tooltip class="item" effect="dark" content="2225602504" placement="top">
              <a href="javascript:;">
                <img src="../../assets/images/contact/wexin.png">
              </a>
            </el-tooltip>
          </li>
          <li>
            <a href="https://gitee.com/rimuru1314" target="_blank">
              <img src="../../assets/images/contact/github.png">
            </a>
          </li>
          <li>
            <a href="https://music.163.com/#/user/home?id=1702282092" target="_blank">
              <img src="../../assets/images/contact/music.png">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
    </div>
</div>
</div>
</template>




<script>
import { mapGetters } from 'vuex'


export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  
}
</script>

<style lang="scss" scoped>
  .bg{
    position: absolute;
    left: 0;
    right: 0;
    background-size: cover;
    height: 100%;
    background-attachment: fixed;
    background-image: url(https://cdn.jsdelivr.net/npm/kang-static/home/assets/bg/054.jpg);
    background-repeat: no-repeat;
  }
  .container {
    display: flex;
    padding: 30px;
    // align-items: center;
    // justify-content: center;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background-color: hsla(0,0%,100%,.7);
  }
  .main{

    text-align: center;
        padding-top: 30px;
        width: 400px;
        height: 400px;
        margin: 0 auto;
        border-radius: 5px;
        background: hsla(0,0%,100%,.5);
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            
            // color: #606266;
            // font-weight: 700;
  }
    .nice-card {
    position: relative;

    .nice-card-header {
      .label {
        flex: 1;

        i {
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }

    .nice-card-bodyer {
      padding-top: 0;

      .userinfo {
        text-align: center;
        padding: 20px 20px 0;

        .avatar {
          width: 75px;
          margin: 0 auto 15px;

          img {
            width: 100%;
          }
        }

        .name {
          font-size: 20px;
          color: #37474f;
          margin-bottom: 20px;
        }

        .nickname {
          color: #a3afb7;
          margin-bottom: 20px;
        }

        .description {
          margin-bottom: 25px;
        }

        .contact {
          text-align: center;

          li {
            display: inline-block;
            margin-right: 15px;
            margin-bottom: 10px;

            a {
              display: inline-block;

              img {
                border: 1px solid #888;
                border-radius: 100%;
              }
            }
          }
        }
      }
    }

  }
.avatar img{
  border-radius: 50%;
}
</style>
